<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta  http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<meta name="author" content="Parallelus" />
	<meta name="description" content="A brief description of this website or your business." />
	<meta name="keywords" content="keywords, or phrases, associated, with each page, are best" />
	<title>Traject - Aim For The Next Level</title>
	
	<!-- Favorites icon -->
	<link rel="shortcut icon" href="http://para.llel.us/favicon.ico" />
	
	<!-- Style sheets -->
	<link rel="stylesheet" type="text/css" href="css/reset.min.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<link rel="stylesheet" type="text/css" href="css/menu.css" />
	<link rel="stylesheet" type="text/css" href="css/fancybox.css" />

	<!-- Skin Style Sheet -->
	<link rel="stylesheet" href="css/skins/skin-1.css" type="text/css" id="SkinCSS" />

	<!-- jQuery framework and utilities -->
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript"> $j = jQuery.noConflict(); </script>
	<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
	<script type="text/javascript" src="js/hoverIntent.min.js"></script>
	<!-- Drop down menus -->
	<script type="text/javascript" src="js/menu.js"></script>
	<!-- Font replacement (cufon) -->
	<script type="text/javascript" src="js/cufon-yui.js"></script>
	<script type="text/javascript" src="js/Vegur.font.js"></script>
	<script type="text/javascript" src="js/Vegur.Light.font.js"></script>
	<!-- Input labels -->
	<script type="text/javascript" src="js/jquery.overlabel.min.js"></script>
	<!-- Inline popups/modal windows -->
	<script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>

	

	<!-- IE only includes (PNG Fix and other things for sucky browsers -->
	
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="css/ie-6.css">
		<script type="text/javascript" src="js/pngFix.min.js"></script>
		<script type="text/javascript"> 
			$j(document).ready(function(){ 
				$j(document.body).supersleight();
			}); 
		</script> 
	<![endif]-->
	<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie-all-versions.css"><![endif]-->



	<!-- BEGIN: For Demo Only -->
		<!--			
		These entries are only needed for demo features, such as the real-time skin changer.
		They can be deleted for production installs without effecting the theme's design or 
		any of the funcionality.
		-->
		<script type="text/javascript" src="js/demo.js"></script>	
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<!-- END: For Demo Only -->



	<!-- Functions to initialize after page load -->
	<script type="text/javascript" src="js/onLoad.js"></script>


</head>
<body>

<div id="Wrapper">

	<div id="Top">
		<div id="TopContainer">
			
			<!-- Search -->
			<div id="SearchWrapper">
				<div id="Search">
					<form action="#" id="SearchForm" method="post">
						<p style="margin:0;"><input type="text" name="SearchInput" id="SearchInput" value="" /></p>
						<p style="margin:0;"><input type="submit" name="SearchSubmit" id="SearchSubmit" class="noStyle" value="" /></p>
					</form>
				</div>
			</div>
			
			<!-- Main Menu: MegaMenu -->
			<div id="MainMenu">
				<ul id="MegaMenu">
				
					<li class="current"><a href="index.html">Home</a></li>
					<li>
						<a href="#">Features</a>
						<div class="sub">
							<div class="row">
								<ul style="width: 200px;">
									<li><h2><a href="#">Home page</a></h2></li>
									<li><a href="index.html">Home 1 (default)</a></li>
									<li><a href="index-2.html">Home 2 (Products)</a></li>
									<li><a href="index-3.html">Home 3 (Nivo)</a></li>
									<li><br /><h2><a href="sample-layout.html">Theme Resources</a></h2></li>
									<li><a href="sample-text.html">Text Styles</a></li>
									<li><a href="sample-layout.html">Layout Overview</a></li>
								</ul>
								<ul style="width: 200px;">
									<li><h2><a href="#">Sample Pages</a></h2></li>
									<li><a href="sample-portfolio.html">Portfolio</a></li>
									<li><a href="sample-portfolio-2.html">Portfolio 2</a></li>
									<li><a href="sample-blog.html">Blog</a></li>
									<li><a href="sample-blog-page.html">Blog (single post)</a></li>
									<li><a href="sample-contact.html">Contact Form</a></li>
									<li><a href="sample-faq.html">FAQ's</a></li>
								</ul>
								<ul style="width: 200px;">
									<li><h2><a href="#">Mega Menus</a></h2></li>
									<li>
										<p>Add unlimited content, links, images and detailed information in your drop-down menus with Mega Menus.</p>
										<p>Usability testing shows mega drop-downs are more efficient and overcome the downsides of traditional menus.</p>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">Skins</a>
						<div style="" class="sub">
							<div class="row">
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('1');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-1.jpg" width="130" alt="Skin 1" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('1');">Skin 1</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('2');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-2.jpg" width="135" alt="Skin 2" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('2');">Skin 2</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('3');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-3.jpg" width="135" alt="Skin 3" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('3');">Skin 3</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('4');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-4.jpg" width="135" alt="Skin 4" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('4');">Skin 4</a></h2></li>
								</ul>
							</div>
							<div class="row">
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('5');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-5.jpg" width="135" alt="Skin 5" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('5');">Skin 5</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('6');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-6.jpg" width="135" alt="Skin 6" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('6');">Skin 6</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('7');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-7.jpg" width="135" alt="Skin 7" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('7');">Skin 7</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('8');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-8.jpg" width="135" alt="Skin 8" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('8');">Skin 8</a></h2></li>
								</ul>
							</div>
							<div class="row" style="text-align: center;">
								<ul style="width: auto; float:none; ">
									<li>
										<label for="WideFormatDesign">
											<input type="checkbox" id="WideFormatDesign" name="WideFormatDesign" /> Enable alternate wide format design? This will toggle the "page" style design on and off.
										</label>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li><a href="sample-faq.html">FAQ's</a></li>	
					<li><a href="sample-contact.html">Contact</a></li>	

				</ul>
			</div> <!-- END id="MainMenu" -->
			
			
			
			
		</div>
	</div> <!-- END id="Top" -->
	
	<a href="index.html" id="LogoHeader" class="logoMedium"></a>
	
	<div id="PageTop"></div>
	<div id="PageWrapper">
		
		<div id="PageOverlay">
			<div id="PageOverlayContent">
					
					<div class="contentArea">
						<h1 class="pageTitle">Page Layout</h1>
						<div class="pageIcon"><img src="images/icons/notes.png" width="128" height="128" alt="Page Layout" /></div>
					</div>

			</div> <!-- END id="PageOverlayContent" -->
		</div> <!-- END id="PageOveraly" -->


		<div id="Showcase">
			<div id="ShowcaseContent">
				<div class="contentArea">
					<h2 class="pageTagLine">Content layout styles and options.</h2>
				</div> <!-- END class="contentArea" -->
			</div> <!-- END id="ShowcaseContent" -->
		</div> <!-- END id="Showcase" -->


		<div id="MainPage">
			<div id="MainPageContent">
				<div class="contentArea">
										
					<div class="one_third">
					
						<div class="sidebar">
							<div class="sidebarBox-1">
								<div class="sidebarBox-2">
								
									<h3>Sub Navigation</h3>
									<ul class="sideNav">
										<li><a href="#">Sample Navigation Link</a></li>
										<li class="currentPage"><a href="#">Current Page Sample</a></li>
										<li><a href="#">Sample Navigation Link</a></li>
										<li><a href="#">Sample Navigation Link</a></li>
										<li><a href="#">Sample Navigation Link</a></li>
									</ul>
									
									<p>&nbsp;</p>
									
									<h3>Layout information</h3>
									<p>There are a variety of different ways you can organize your pages. Using the built in styles it's easy to create different layouts ranging from 1, 2, 3 and even 4 column page structures. The standard page layout allows a content area and side navigation (side bar) which you can choose between either left or right alignment. This page demonstrates the default 2 column content layout with a the navigation on the left.</p>

								</div>
							</div>
						</div>
						
					</div>

					<div class="two_third last">
						<div class="breadcrumbs">
							<a href="index.html">Home</a> &nbsp;\&nbsp; <a href="#">Some Page</a> &nbsp;\&nbsp; <a href="#">Some Page</a> &nbsp;\&nbsp; This Page
						</div>
											
						<!-- Content: Default Page -->
						<a name="default_page"></a>
						<h2 class="title">Default Page</h2>
						<div class="hr"></div>
						
						<h3>Standard Layout</h3>
						<p>The default page is the standard layout used for content pages. It contains a content section and a sub-navigation. This layout can be reversed to display the content and sub-navigation on either side depending on your preference.</p>
						<p class="center">
							<img src="images/content/navigation-graphic.png" width="445" height="240" alt="Default Page Layout Options" />
						</p>
						<p>To achieve this layout create two <code>div</code> tags and add the class "two_third" to one and the class "one_third" to the other. The order the tags appear in the code will determine if you have a left or right sub-navigation layout. You MUST also add the class "last" to the column which appears on the far right. See the sample code below for an example of how this might be done.</p>
						<h5>Layout with right navigation</h5>
<pre>
&lt;div class="<strong>two_third</strong>"&gt;Your content here.&lt;/div&gt;
&lt;div class="<strong>one_third last</strong>"&gt;Sub-navigation here&lt;/div&gt;
</pre>
						<p><a href="sample-blog-page.html">View a sample page using this layout.</a></p>

						<h5>Layout with left navigation</h5>
<pre>
&lt;div class="<strong>one_third</strong>"&gt;Sub-navigation here&lt;/div&gt;
&lt;div class="<strong>two_third last</strong>"&gt;Your content here.&lt;/div&gt;
</pre>
						<p><a href="sample-layout.html">View a sample page using this layout.</a><br />(current page)</p>
						<br />
		
						<!-- Content: Full Page -->
						<a name="full_page"></a>
						<h2 class="title">Full Page</h2>
						<div class="hr"></div>

						<h3>Full Width Layout</h3>
						<p>The full page layout uses the full width of the content area. It does not have a sub-navigation or sidebar making it a good choice for portfolio pages.</p>
						<p class="center">
							<img src="images/content/fullpage-graphic.png" width="210" height="240" alt="Full Page Layout" />
						</p>
						<p>This layout does not require any extra container tags. The full page layout will be displayed when you add content to the existing content area of the page template.</p>
						<p><a href="sample-portfolio.html">View a sample page using this layout.</a></p>
						<br />
		
						<!-- Content: Blog Page -->
						<a name="blog_page"></a>
						<h2 class="title">Blog Page</h2>
						<div class="hr"></div>

						<h3>Blog Style Layout</h3>
						<p>The blog layout offers a left or right menu depending on your preference. Each entry has a summary layout and full article layout. This view can also be used for news articles or any categorized content structure needed.</p>
						<p class="center">
							<img src="images/content/blog-graphic.png" width="445" height="240" alt="Blog Layout" />
						</p>
						<p>Left and right layout options for the blog are achieved using the same markup as the default page.</p>
						<p><a href="sample-blog.html">View a sample page using this layout.</a></p>
						<br />
		
						<!-- Content: Multi-column Page -->
						<a name="multi_column_page"></a>
						<h2 class="title">2, 3 &amp; 4 Column Pages</h2>
						<div class="hr"></div>

						<h3>Multi-column Layouts</h3>
						<p>The multi-column layouts use the entire width of the page and are not intended for a sub-navigation. The 2 column (half page) layout is well suited for landing pages before a content section.</p>
						<p>The three, four and five column design use equal width columns. With the three column layout you can have a sub-navigation for either the left or right column.</p>
						<p class="center">
							<img src="images/content/2and3column-graphic.png" width="445" height="240" alt="2 and 3 Column Layout " />
						</p>
						<h5>2 column layout</h5>
						<p>Requires two <code>div</code> tags with the class "half-page", the last column should also have the class "last".</p>
<pre>
&lt;div class="<strong>half_page</strong>"&gt;Your first content column.&lt;/div&gt;
&lt;div class="<strong>half_page last</strong>"&gt;Your second content column.&lt;/div&gt;
</pre>
						<p><!--a href="sample-contact.html">View a sample page using this layout.</a--></p>
		
						<h5>3 column layout</h5>
						<p>Requires three <code>div</code> tags with the class "one_third". Like the default page, the order the tags are entered in the code determines the order of appearance on the page and the last column (on the right) must contain the class "last".</p>
<pre>
&lt;div class="<strong>one_third</strong>"&gt;Sub-navigation (optional)&lt;/div&gt;
&lt;div class="<strong>one_third</strong>"&gt;Your first content column.&lt;/div&gt;
&lt;div class="<strong>one_third last</strong>"&gt;Your second content column.&lt;/div&gt;
</pre>
						<p><!--a href="index.html">View a sample page using this layout.</a--></p>

						<h5>4 column layout</h5>
						<p>Requires four <code>div</code> tags with the class "one_fourth". The order the tags are entered in the code determines the order of appearance on the page and the last column (on the right) must contain the class "last".</p>
<pre>
&lt;div class="<strong>one_fourth</strong>"&gt;Your first content column.&lt;/div&gt;
&lt;div class="<strong>one_fourth</strong>"&gt;Your second content column.&lt;/div&gt;
&lt;div class="<strong>one_fourth</strong>"&gt;Your third content column.&lt;/div&gt;
&lt;div class="<strong>one_fourth last</strong>"&gt;Your fourth content column.&lt;/div&gt;
</pre>
						<p><!--a href="index.html">View a sample page using this layout.</a--></p>
							

						<div class="clear"></div>
					</div>

						<div class="clear"></div>
						
				</div> <!-- END class="contentArea" -->
			</div> <!-- END id="MainPageContent" -->
		</div> <!-- END id="MainPage" -->
		
		
	</div> <!-- END id="PageWrapper" -->

	<div id="FooterWrapper">
		<div id="Footer">
			<div id="FooterContent">
				
				<div class="contentArea">
					
					<div class="copyright right">
						Copyright &copy; 2010 - <a href="http://para.llel.us">Parallelus</a> - All rights reserved. |  
						Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> &amp; 
						<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS</a>.
					</div>
					
					<ul id="FooterMenu" class="horizList left">
						<li><a href="index.html">Home</a></li>
						<li><a href="#">Features</a></li>
						<li><a href="sample-faq.html">FAQ's</a></li>
						<li><a href="sample-contact.html">Contact</a></li>
					</ul>
					
					<div class="clear"></div>
					
				</div> <!-- END class="contentArea" -->
				
			</div> <!-- END id="FooterContent" -->
		</div> <!-- END id="Footer" -->
	</div> <!-- END id="FooterWrapper" -->
	
</div> <!-- END id="Wrapper" -->

<!-- Activate Font Replacement (cufon) -->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>